import React, { Component } from 'react'

import Swiper from 'swiper'

import 'swiper/css/swiper.css'

export default class MySwiper extends Component {
    componentDidUpdate() {
        new Swiper('.swiper-container', {
            autoplay: {
                delay: 1000,
                disableOnInteraction: false
            },
            loop: true,
            pagination: {
                el: '.swiper-pagination'
            }
        })
    }
    render() {
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                        this.props.list.map((item) => {
                            return (
                                <div key={item.id} className="swiper-slide">
                                    <img src={`${item.pic}`} alt=""/>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        )
    }
}
